/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
    --header-height: 3.5rem;

    /*========== Colors ==========*/
    --text-color       : hsl(0, 0%, 100%);
    --body-color       : hsl(0, 0%, 0%);

    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font         : 'Poppins', sans-serif;
    --h2-font-size      : 1.25rem;
    --h3-font-size      : 1rem;
    --normal-font-size  : 0.938rem;
    --small-font-size   : 0.813rem;

    /*========== Font weight ==========*/
    --font-semibold : 600;

    /*========== z index ==========*/
    --z-fixed   : 100;
}

/* Responsive typography */
@media screen and (min-width: 968px) {
    :root {
        --h2-font-size      : 2rem;
        --h3-font-size      : 1.25rem;
        --normal-font-size  : 1rem;
        --small-font-size   : 0.875rem;
    }
}

/*=============== BASE ===============*/

*{
    box-sizing : border-box;
    padding    : 0;
    margin     : 0;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family : var(--body-font);
    font-size   : var(--normal-font-size);
    background-color : var(--body-color);
    color            : var(--text-color);
}

h1,h2,h3{
    color       : var(--title-color);
    font-weight : var(--font-semibold);
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    max-width : 100%;
    height    : auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container{
    max-width    : 1200px;
    margin-left  : 1rem;
    margin-right : 1rem;
    margin: 0 auto;
}

.main{
    overflow: hidden;
}

.section{
    padding: 4rem 0 1rem 0;
}

.section_title,
.section_subtitle{
    text-align: center;
}

.section_title{
    font-size     : var(--h2-font-size);
    color         : var(--first-color);
    margin-bottom : 2rem;
}

.section_subtitle{
    display   : block;
    font-size : var(--smaller-font-size);
    color     : var(--text-color-light);
}

/*=============== HEADER & NAV===============*/
.header{
    display          : flex;                /* Enables Flexbox layout */
    top              : 0;                   /* Positions the header at the top of the viewport */
    left             : 0;                   /* Positions the header at the left edge of the viewport */
    width            : 100%;                /* Makes the header span the full width of the viewport */
    background-color : var(--body-color);   /* Sets background color for the header */
    height           : 5rem;                /* Sets the height of the header */
    z-index          : var(--z-fixed);      /* Ensures the header stays on top by setting its stacking order */
    position         : fixed;               /* Fixes the header at the top, making it sticky during scroll */
    justify-content  : center;              /* Distributes space between child elements evenly */
    align-items      : center;              /* Vertically centers child elements */
    padding          : 0 1rem;              /* Added padding for spacing */
}
          
.nav_logo{
    display         : flex;                 /* Aligns logo text and icon horizontally */
    align-items     : center;               /* Centers icon and text vertically */
    text-decoration : none;
    color           : var(--text-color);
    font-weight     : 700;
    font-size       : 1.8em;
    white-space     : nowrap;               /* Prevents text wrapping */
}

.Arabic{
    font-family: "Aref Ruqaa", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.7em;
    margin-bottom: 1.2rem;
}

.nav_icon{
    display         : block;                /* Treats the element as a block-level element */
    width           : 3.5rem;               /* Sets a fixed width for the icon */
    height          : 100%;                 /* Sets the height to match a custom CSS variable for header height */
    margin-right    : 10px;                 /* Adds 10px margin to the right of the icon */
}

/*=============== HOME ===============*/
.home_img {
    width: 100%;
    height: auto;
    display: block;
}

/*=============== LINKS ===============*/
.links_container {
    display: flex;
    flex-wrap: wrap;             /* Allows icons to wrap onto the next line if the screen is narrow */
    justify-content: center;     /* Centers the icons horizontally */
    gap: 1.2rem;                 /* Adds spacing between the icons */
}

.social-link {
    display: inline-block;
    transition: transform 0.2s ease;  /* Smooth animation for hover effect */
}

.social-link img {
    width: 80px;                 /* Sets the width for the social media icons */
    height: 80px;                /* Ensures the icons maintain aspect ratio */
    object-fit: contain;         /* Ensures icons are fully visible within their bounding box */
}

.social-link:hover {
    transform: scale(1.2);       /* Increases size on hover for a subtle zoom effect */
}

/*=============== EVENTS ===============*/
.events {
    text-align: center;
}

.events_container {
    display: flex;
    flex-wrap: wrap; /* Allow the cards to wrap onto new rows */
    justify-content: center; /* Center the album cards */
    gap: 2rem; /* Adds space between each card */
}

.event_card {
    background-color: #ad0505;
    padding: 1rem;
    border-radius: 1rem;
    width: 18rem;
    max-width: 100%; /* Ensures the card doesn't overflow on smaller screens */
    transition: transform 0.3s ease;
    overflow: hidden;
    text-align: left; 
    height: 8rem;
}

.event_card:hover {
    transform: scale(1.05); /* Adds a hover effect */
}

.event_title {
    margin-top: 0.3rem;
    font-size: var(--h3-font-size);
    color: var(--text-color);
    height: 4rem;
}

.event_date {
    font-size: var(--small-font-size);
    color: var(--text-color);
}

/*=============== ALBUMS ===============*/
.albums {
    text-align: center;
}

.albums_container {
    display: flex;
    flex-wrap: wrap; /* Allow the cards to wrap onto new rows */
    justify-content: center; /* Center the album cards */
    gap: 2rem; /* Adds space between each card */
}

.album_card {
    background-color: #ad0505;
    padding: 1rem;
    border-radius: 1rem;
    width: 18rem;
    max-width: 100%; /* Ensures the card doesn't overflow on smaller screens */
    transition: transform 0.3s ease;
    overflow: hidden;
    height: 24rem;
}

.album_card:hover {
    transform: scale(1.05); /* Adds a hover effect */
}

.albums_img {
    width: 100%;
    height: 20rem;
    border-radius: 10px;
    object-fit: cover; /* Ensures the image scales correctly */
}

.album_title {
    margin-top: 0.3rem;
    font-size: var(--h3-font-size);
    color: var(--text-color);
}

/*=============== ARTISTS SECTION ===============*/
.artists {
    text-align: center;
}

.artists_container {
    display: flex;
    flex-wrap: wrap;            /* Allow artist cards to wrap onto new rows */
    justify-content: center;    /* Center the artist cards */
    gap: 2rem;                  /* Adds space between each card */
    padding-bottom: 6rem;
}

.artist_card {
    background-color: rgb(173, 5, 5); /* Adjust the last value for desired opacity */
    padding: 1rem;                                          /* Padding around the content */
    border-radius: 1rem;                                    /* Rounded corners */
    width: 17rem;                                           /* Set a fixed width */
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Smooth transitions for hover effects */
    overflow: hidden;                                       /* Ensures content doesn't overflow */
    text-align: left;                                       /* Center the text and content inside */
}

.artist_card:hover {
    transform: scale(1.05);  /* Slight zoom on hover */
}

.artist_img {
    width: 100%;        /* Full width image */
    height: 20rem;       /* Maintain image aspect ratio */
    border-radius: 10px;
    object-fit: cover;  /* Ensure the image scales nicely */
}

.artist_name {
    font-size: var(--h3-font-size);     /* Larger font for artist name */
    color: var(--text-color);           /* White text */
}

.artist_role {
    font-size: var(--normal-font-size);  /* Smaller font for role */
    color: #ffffffa2;  /* Lighter text color for role */
}

/*=============== FOOTER ===============*/
.footer {
    background-color: #ad0505;  /* Background color for footer */
    color: var(--text-color);             /* Text color */
    padding: 2rem 0;                      /* Padding around the footer content */
    text-align: center;                   /* Center-align all footer content */
}

.footer_container {
    display: flex;
    flex-direction: column;               /* Stack items vertically */
    align-items: center;                  /* Center the items */
    gap: 1.5rem;                          /* Space between elements */
}

.footer_title {
    font-size: 3.5rem;       /* Adjusts the footer title size */
    font-weight: 700;    /* Makes the title bold */
    color: rgb(0, 0, 0);             /* Optional: Custom color for the title */
}

.footer_list {
    display: flex;
    gap: 1.5rem;                          /* Adds space between the list items */
    padding: 0;
}

.footer_link {
    color: var(--text-color);             /* Footer link color */
    text-decoration: none;                /* Removes the underline from links */
    transition: color 0.3s ease;          /* Smooth transition when hover */
}

.footer_link:hover {
    color: rgb(0, 0, 0);             /* Changes the link color on hover */
}

.footer_social {
    display: flex;
    gap: 1.5rem;              /* Space between the icons */
    padding: 0;
}

.footer_social-link i {
    font-size: 2rem;                    /* Icon size */
    transition: transform 0.3s ease;      /* Animation for hover effect */
    color: var(--text-color);             /* Default icon color */
}

.footer_social-link:hover i {
    color: rgb(0, 0, 0);             /* Changes icon color on hover */
    transform: scale(1.2);                /* Enlarges icons slightly on hover */
}

.footer_copy {
    font-size: var(--small-font-size);    /* Small font for the copyright text */
    color: var(--text-color-light);       /* Light color for the copyright text */
}

/*=============== BREAKPOINTS ===============*/
@media screen and (max-width: 768px) {
    .header {
        flex-direction: column; /* Stack elements vertically on small screens */
        height: auto; /* Allow the header to grow based on content */
        padding: 1rem 0; /* Add padding */
    }

    .nav_logo {
        font-size: 1.5em; /* Make the logo text smaller */
    }

    .Arabic {
        font-size: 2em; /* Reduce the Arabic logo font size */
        margin-bottom: 0.5rem; /* Reduce margin for smaller screens */
    }

    .nav_icon {
        width: 3rem; /* Scale down the icon size */
    }

    .footer_title{
        font-size: 3rem;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --h2-font-size      : 1.60rem;
        --h3-font-size      : 0.9rem;
        --normal-font-size  : 1rem;
        --small-font-size   : 0.875rem;
    }

    .section{
        padding: 1rem 0 1rem 0;
    }

    /*=============== HEADER & NAV===============*/
    .header {
        justify-content: center; /* Center everything on small screens */
        padding: 0.1rem;
    }

    .nav_logo {
        font-size: 1.2em; /* Smaller font size for small screens */
    }

    .Arabic {
        font-size: 1.6em; /* Smaller Arabic font size */
        display: inline-flex;
    }

    .nav_icon {
        width: 2.5rem; /* Reduce icon size */
        margin-right: 5px; /* Less margin for smaller screens */
    }

    /*=============== HOME===============*/
    .home_img {
        width: 100%;
        height: auto;
        display: block;
        padding: 3rem 0 0rem 0;
    }

    /*=============== LINKS ===============*/
    .links_container {
    display: flex;
    flex-wrap: wrap;             /* Allows icons to wrap onto the next line if the screen is narrow */
    justify-content: center;     /* Centers the icons horizontally */
    gap: 0.5rem;                 /* Adds spacing between the icons */
    }

    .social-link img {
    width: 40px;                 /* Sets the width for the social media icons */
    height: 40px;                /* Ensures the icons maintain aspect ratio */
    }

    /*=============== EVENTS ===============*/
    .events_container {
        gap: 1rem; /* Adds space between each card */
    }

    .event_card {
        padding: 1rem;
        width: 8.5rem;
        max-width: 100%; /* Ensures the card doesn't overflow on smaller screens */
        text-align: left; 
        height: 11rem;
    }

    .event_title {
        margin-top: 0rem;
        font-size: var(--h3-font-size);
        color: var(--text-color);
        height: 7.5rem;
    }

    .event_date {
        font-size: var(--small-font-size);
        color: var(--text-color);
        margin-bottom: 1rem;
    }
    /*=============== FOOTER ===============*/
    .footer_title{
        font-size: 2.5rem;
    }
}
